<template>
  <div>
    <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      class="mt-dialog"
      width="80%"
      @close="close"
    >
      <div class="top">
        <el-input
          v-model="kw"
          placeholder="输入 任意字符 进行筛选"
          class="input-with-select"
          clearable
          @keyup.native.enter="handleSearch"
          @change="handleSearch"
        >
          <el-button slot="append" icon="el-icon-search" @click="getList">搜索</el-button>
        </el-input>
        <div style="float: right"><a :href="ad_link" target="_blank" title="打开广告管理"><img
          :src="main_image"
          width="45"
        ></a></div>

      </div>
      <div>
        <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
          <el-tabs v-model="activeName">
            <el-tab-pane label="简单结果" name="simple">
              <el-table
                v-loading="listLoading"
                :data="sum_data"
                border
                fit
                highlight-current-row
                style="width: 100%"
              >
                <el-table-column align="center" label="投放词" prop="keyword">
                  <template slot-scope="scope">
                    <span @click="handleSearchKeyword(scope.row.keyword)">{{ scope.row.keyword }}</span>
                  </template>
                </el-table-column>
                <el-table-column align="center" label="操作建议" prop="operation_sujest" width="200">
                  <template slot-scope="scope">
                    <el-tag v-if="scope.row.operation_sujest==='delete'" type="danger">删除</el-tag>
                    <span v-else>{{ scope.row.operation_sujest }}</span>
                  </template>
                </el-table-column>
                <el-table-column align="center" label="展示" sortable prop="impression" width="80" />
                <el-table-column align="center" label="点击" sortable prop="click" width="80" />
                <el-table-column align="center" label="ctr" sortable prop="ctr" width="80">
                  <template slot-scope="scope">
                    {{ (scope.row.ctr * 100).toFixed(1) }}%
                  </template>
                </el-table-column>
                <el-table-column align="center" label="cost" sortable prop="cost" width="80" />
                <el-table-column align="center" label="cost占比" sortable prop="cost_percent" width="120">
                  <template slot-scope="scope">
                    {{ scope.row.cost_percent }}%
                  </template>
                </el-table-column>
                <el-table-column align="center" label="gmv" sortable prop="order_gmv" width="80" />
                <el-table-column align="center" label="排名" sortable prop="location_in_ads" width="80" />
                <el-table-column align="center" label="roi" sortable prop="roi" width="80">
                  <template slot-scope="scope">
                    {{ (scope.row.roi).toFixed(1) }}
                  </template>
                </el-table-column>
                <el-table-column align="center" label="搜索词" prop="count" width="120" />
                <el-table-column align="center" label="最早" prop="creat_at" width="120">
                  <template slot-scope="scope">
                    {{ scope.row.create_at.split(' ')[0] }}
                  </template>
                </el-table-column>
              </el-table>
            </el-tab-pane>
            <el-tab-pane label="详细结果" name="detail">
              <el-table
                v-loading="listLoading"
                :data="data"
                border
                fit
                highlight-current-row
                style="width: 100%"
                @sort-change="handleSort"
              >
                <el-table-column align="center" label="投放词" prop="keyword" />
                <el-table-column align="center" label="用户搜索词" prop="search_key" />

                <el-table-column align="center" label="展示" sortable="custom" prop="impression" width="80" />
                <el-table-column align="center" label="点击" sortable="custom" prop="click" width="80" />
                <el-table-column align="center" label="ctr" sortable="custom" prop="ctr" width="80">
                  <template slot-scope="scope">
                    {{ (scope.row.ctr * 100).toFixed(1) }}%
                  </template>
                </el-table-column>
                <el-table-column align="center" label="cost" sortable="custom" prop="cost" width="80" />
                <el-table-column align="center" label="gmv" sortable="custom" prop="order_gmv" width="80" />
                <el-table-column align="center" label="排名" sortable="custom" prop="location_in_ads" width="80" />

                <el-table-column align="center" label="roi" sortable="custom" prop="roi" width="80">
                  <template slot-scope="scope">
                    {{ (scope.row.roi).toFixed(1) }}
                  </template>
                </el-table-column>
              </el-table>
              <el-pagination
                v-if="data.length"
                background
                class="mt-pagination"
                :current-page="page"
                :page-sizes="[10,20,50,100]"
                :page-size="pagesize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
                @size-change="handleSizeChange"
                @current-change="handlePageChange"
              />
            </el-tab-pane>

          </el-tabs>
        </el-row>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { Get } from '@/api/shopee/shopeeadskeyword'
import qs from 'qs'

const orderMapper = {
  'ascending': 0,
  'descending': 1,
  'null': ''
}
export default {
  name: 'Shopeeadskeywords',
  props: ['isVisible', 'shopeeadsproduct_id', 'ad_link', 'main_image', 'time_start', 'time_end'],
  data() {
    return {
      width: '80%',
      pagesize: 10,
      page: 1,
      total: 0,
      kw: '',
      data: [],
      sum_data: [],
      websites: [],
      title: '产品销售情况',
      total_sales: 0,
      total_orders: 0,
      order_sales: 0,
      daily_sales: 0,
      dialogVisible: false,
      listLoading: false,
      activeName: 'simple',
      order_by: 'impression',
      order_desc: 1,
      lineChartData: {},
      timerange: '',
      pickerOptions: {
        shortcuts: [{
          text: '今天',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime())
            start.setHours(0, 0, 0)
            picker.$emit('pick', [start, end])
          }
        },
        {
          text: '昨天下班后',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24)
            start.setHours(19, 0, 0)
            end.setHours(23, 59, 59)
            picker.$emit('pick', [start, end])
          }
        },
        {
          text: '昨天',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 1)
            start.setHours(0, 0, 0)
            end.setTime(end.getTime() - 3600 * 1000 * 24 * 1)
            end.setHours(23, 59, 59)
            picker.$emit('pick', [start, end])
          }
        },
        {
          text: '最近3天',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 3)
            start.setHours(0, 0, 0)
            picker.$emit('pick', [start, end])
          }
        },
        {
          text: '最近一周',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            start.setHours(0, 0, 0)
            end.setTime(end.getTime() - 3600 * 1000 * 24)
            end.setHours(23, 59, 59)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            start.setHours(0, 0, 0)
            end.setHours(23, 59, 59)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            start.setHours(0, 0, 0)
            end.setHours(23, 59, 59)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近6个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 180)
            start.setHours(0, 0, 0)
            end.setHours(23, 59, 59)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近1年',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 365)
            start.setHours(0, 0, 0)
            end.setHours(23, 59, 59)
            picker.$emit('pick', [start, end])
          }
        }
        ]
      }
    }
  },
  watch: {
    isVisible(v) {
      this.dialogVisible = v
    },
    time_start(v) {
      if (v) {
        if (this.timerange === '') {
          this.timerange = ['', '']
        }
        this.timerange[0] = new Date(v)
      }
    },
    time_end(v) {
      if (v) {
        if (this.timerange === '') {
          this.timerange = ['', '']
        }
        this.timerange[1] = new Date(v)
      }
    },
    shopeeadsproduct_id(v) {
      if (v) {
        this.title = '产品 ' + v + '广告词数据'
        this.getList()
      }
    }
  },
  methods: {
    handleSearchKeyword(keyword) {
      this.kw = keyword
      this.activeName = 'detail'
      this.getList()
    },
    getList() {
      this.listLoading = true
      Get(null,
        qs.stringify({
          shopeeadsproduct_id: this.shopeeadsproduct_id,
          kw: this.kw,
          start: this.time_start,
          end: this.time_end,
          pagesize: this.pagesize,
          page: this.page,
          order_by: this.order_by,
          order_desc: this.order_desc
        })).then((response) => {
        this.data = response.data.data
        this.sum_data = response.data.sum_data
        this.total = response.data.total
        this.listLoading = false
      }).catch(error => {
        console.log(error)
        this.listLoading = false
      })
    },

    notify(message, duration) {
      this.$notify({
        title: '成功',
        message: message,
        type: 'success',
        duration: duration || 2000
      })
    },
    // pageSize 改变后触发 table 更新
    handleSizeChange(val) {
      this.pagesize = val
      this.getList()
    },
    // page 改变后触发 table 更新
    handlePageChange(val) {
      this.page = val
      this.getList()
    },
    // 点击搜索
    handleSearch() {
      this.page = 1
      this.getList()
    },
    handleSort(v) {
      this.order_by = v.prop
      this.order_desc = orderMapper[v.order]
      this.getList()
    },
    scrollTop() {
      window.scrollTo(0, 0)
    },
    close() {
      this.$emit('closeMyDialog', false)
    }
  }
}
</script>

<style scoped>
.el-tag + .el-tag {
  margin-left: 10px;
}

.top >>> .el-input {
  width: auto;
}

.top >>> .input-with-select .el-input-group__prepend {
  background-color: #fff;
}

.top {
  padding-left: 20px;
  margin-bottom: 5px;
  margin-top: 28px;
}

.input-with-select {
  width: calc(100% - 200px);
}

.add-btn {
  float: right;
  margin-right: 20px;
  width: 150px
}

.mt-pagination {
  float: right;
  margin-top: 5px;
}

.app-container >>> .el-dialog {
  margin-top: 48px !important;
  margin-bottom: 5px;
}

.mt-dialog >>> .el-transfer-panel {
  width: calc(50% - 60px);
}

.mt-form >>> .el-select {
  width: 100%;
}

.mt-form >>> .el-input__inner {
  width: 100%;
}

.mt-dialog >>> .el-dialog {
  margin: 10px auto !important;
}

.mt-dialog >>> .el-dialog__body {
  padding-bottom: 60px;
  padding-top: 5px;
}

.top >>> .el-select {
  width: 300px;
}

.mt-form >>> a:visited {
  color: purple;
}

.mt-form >>> a:link {
  color: #409EFF;
}

.mt-form >>> a:active {
  color: red;
}

.mt-form >>> a:hover {
  color: red;
  text-decoration: underline;
}
</style>
